<template>
    <div id="linecharts">
    </div>
</template>


<script setup>
import { inject, onMounted, ref, watch } from 'vue'
const echarts = inject('echarts')

let option = {
    title: {
        text: '学习时长',
        left: 'center',
    },
    // 设置鼠标停留展示效果
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            return (
                params.name + '-' + params.value + '分钟'
            );
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
            rotate: 45
        }
    },
    yAxis: {
        type: 'value',
        name: '单位（分钟）',
        nameTextStyle: { align: 'left' },
        axisTick: {
            length: 5
        }
    },
    series: [
        {
            data: [],
            type: 'line'
        }
    ]
};

const props = defineProps({
    xdata: {
        default: () => ['2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日'],
        type: Array,
        required: true
    },
    ydata: {
        default: () => [30, 50, 60, 70, 100, 90, 82],
        type: Array,
        required: true
    },
})
onMounted(() => {
    var chartDom = document.querySelector('#linecharts');
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);

    watch(() => props.xdata, (newval, oldval) => {
        option.xAxis.data = newval
        option && myChart.setOption(option);
    },
        {
            immediate: true
        }
    )

    watch(() => props.ydata, (newval, oldval) => {
        option.series[0].data = newval
        option && myChart.setOption(option);
    },
        {
            immediate: true
        }
    )
    // initCharts()
})

function initCharts() {
    var chartDom = document.querySelector('#linecharts');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '学习时长',
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: ['2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日', '2024年7月15日'],
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            axisTick: {
                length: 5
            }
        },
        series: [
            {
                data: [30, 50, 60, 70, 100, 90, 82],
                type: 'line'
            }
        ]
    };

    option && myChart.setOption(option);
}
</script>

<style scoped>
#linecharts {
    box-sizing: border-box;
    width: 500px;
    height: 320px;
    border: 1px solid #ccc;
    padding: 10px 20px 20px;
    /* padding-left: 20px; */
}
</style>